Form Validation in a Vue 3 App with Vee-Validate 4 — Error Messages and Form Values

Form validation is an important part of any app.

In this article, we’ll look at how to use Vee-Validate 4 in our Vue 3 app for form validation.

ErrorMessage Component

We can use the ErrorMessage component to display error messages.

For example, we can write:

<template>
  <Form>
    <Field name="field" as="input" :rules="rules" />
    <ErrorMessage name="field" />
  </Form>
</template>

<script>
import { Field, Form, ErrorMessage } from "vee-validate";
import * as yup from "yup";

export default {
  components: {
    Field,
    Form,
    ErrorMessage,
  },
  data() {
    const rules = yup.string().required();

    return {
      rules,
    };
  },
};
</script>

We add the ErrorMessage component and set the name prop to the value of the name prop of the Field component to display the validation error messages for the field.

Custom Labels with Yup

We can change the label of the field.

For example, we can write:

<template>
  <Form :validation-schema="schema">
    <Field name="emailAddr" as="input" />
    <ErrorMessage name="emailAddr" />

    <Field name="accPassword" as="input" />
    <ErrorMessage name="accPassword" />
  </Form>
</template>

<script>
import { Field, Form, ErrorMessage } from "vee-validate";
import * as yup from "yup";

export default {
  components: {
    Field,
    Form,
    ErrorMessage,
  },
  data() {
    const schema = yup.object().shape({
      emailAddr: yup.string().email().required().label("Email Address"),
      accPassword: yup.string().min(5).required().label("Your Password"),
    });
    return {
      schema,
    };
  },
};
</script>

We call the label method to change the field label.

And when we see the validation error message, we’ll see the field labels display in the error messages.

Form Values

We can get the form values from the slot props of the Form component.

For example, we can write:

<template>
  <Form v-slot="{ values }" :validation-schema="schema">
    <Field name="email" as="input" />
    <Field name="name" as="input" type="email" />
    <Field name="password" as="input" type="password" />

    <pre>
      {{ values }}
    </pre>
  </Form>
</template>

<script>
import { Form, Field } from "vee-validate";
import * as yup from "yup";

export default {
  components: {
    Form,
    Field,
  },
  data() {
    const schema = yup.object().shape({
      email: yup.string().required().email(),
      name: yup.string().required(),
      password: yup.string().required().min(8),
    });

    return {
      schema,
    };
  },
};
</script>

The values property from the slot props has the form values.

So when we type into them, we’ll see the values displayed.

To access the form values in the component object, we can access them from the parameter of the submit handler:

<template>
  <Form @submit="onSubmit" :validation-schema="schema">
    <Field name="email" as="input" />
    <Field name="name" as="input" type="email" />
    <Field name="password" as="input" type="password" />
    <input type="submit" />
  </Form>
</template>

<script>
import { Form, Field } from "vee-validate";
import * as yup from "yup";

export default {
  components: {
    Form,
    Field,
  },
  data() {
    const schema = yup.object().shape({
      email: yup.string().required().email(),
      name: yup.string().required(),
      password: yup.string().required().min(8),
    });

    return {
      schema,
    };
  },
  methods: {
    onSubmit(values) {
      console.log(values);
    },
  },
};
</script>

We add the submit event handler.

Then in the submit event handler, we can access the form values from the values parameter.

When we click submit and the inputted values are all valid, then the onSubmit method will be run.

Conclusion

We can display error messages with the ErrorMessage component.

Also, we can display form values from the slot props and get the form values in the submit handler.